<template>
  <div class="root">
    <div class="icon">
      <img src="../../../assets/images/首页logo.png">
      <span>云医通</span>
    </div>
    <el-form :model="user" :rules="rules_login" ref="form_login_user" class="login">
      <!-- 账号 -->
      <div class="user">
        <p class="user-account">账号:</p>
        <el-form-item prop="account">
          <el-input style="width: 300px;font-size: 18px;margin-left: 10px;margin-top: 5px;" 
          size="small" v-model="user.account"
          placeholder="请输入医生账号"></el-input>
        </el-form-item>
      </div>
      <!-- 密码 -->
      <div class="user">
        <p class="user-account">密码:</p>
        <el-form-item>
          <el-input style="width: 300px;font-size: 18px;margin-left: 10px;margin-top: 5px;" 
          size="small" v-model="user.password" type="password"
          placeholder="请输入密码"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div class="footer">
      <el-button type="primary" @click="subLogin()" style="width: 300px;">
        登录
      </el-button>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive,ref} from 'vue'
import {reqdocLogin} from '@/api/doctor'
import { useRouter } from 'vue-router'

import NProgress from "nprogress";

import "nprogress/nprogress.css"

// 取消进度条加载圆圈
NProgress.configure({ showSpinner: false });

const $router=useRouter()

// 登录表单实例
let form_login_user=ref()
// 存储登录时用户输入的账号和密码
let user=reactive({
  account:'',
  password:'',
  id:''
})

onMounted(()=>{
  form_login_user.value.resetFields(); 
})


//用户名校验 
const validateUsername = (rule, value, callback) => {
const usernamePattern = /^[A-Za-z0-9\u4e00-\u9fa5]{1,10}$/; // 匹配字母、数字和汉字，长度在1到10之间
if (!value) {
  callback(new Error('用户名不能为空'));
} else if (!usernamePattern.test(value)) {
  callback(new Error('用户名只能包含字母、数字或汉字，且长度在1到10之间'));
} else {
  callback();
}
};
//登录校验规则 
const rules_login={

  account:[{trigger:'blur'},
  {validator:validateUsername,trigger:'blur'}],
}
// 点击登录
const subLogin=async ()=>{
  await form_login_user.value.validate()
  NProgress.start()
  // console.log(user.account,user.password,user.id)
    let res=await reqdocLogin(user.account,user.password)
    NProgress.done()
    // console.log(res)
    if(res.data.code){
      localStorage.setItem('DOCTOKEN',res.data.data.token)
      localStorage.setItem('DOCTORID',res.data.data.did)
      localStorage.setItem('DOCNAME',user.account)
      $router.push('/doctor')
    }else{
      alert(`${res.data.msg}`)
    }
}
</script>

<style lang="scss" scoped>
.root{
  .icon{
    display: flex;
    margin-left: 80px;
    margin-top: 10%;
    img{
      width: 80px;
      height: 80px;
      margin-left: 42%;
    }
    span{
      font-size: 28px;
      margin-left: 50px;
      margin-top: 20px;
    }
  }
  .login{
    margin-top: 20px;
    margin-left: 25%;
    .select{
      display: flex;
    }
  }
  .user{
    display: flex;
    margin-left: 320px;
    margin-bottom: 30px;
    span{
      font-size: 16px;
      width: 180px;
    }
    span:hover{
      cursor: pointer;
      color: #bbb;
    }
  }
  .forget{
    color:blue;
    margin-left: 10px;
    margin-top: 15px;
  }
  .footer{
    margin-left: 44%;
  }
}
</style>
